// components/MusicList/Mu.js
const {HEIGHT, imgHeight} = require('../../tools/constant')
const {getStatusBarHeight} = require('../../tools/tools')
const {setBgImageStyle, setFilterStyle, setPlayBtnStyle, setScrollStyle} = require('../../tools/setStyle')

Component({
  properties: {
    songs: {
      type: Array,
      value: []
    },
    album: Object,
    rank: Boolean,
    scrollY: Number
  },
  data: {
    statusBarHeight: 0,
    filterStyle: {},
    bgImageStyle: {},
    scrollStyle: {},
    display: '',
    // y轴z最大滚动的距离
    maxTranslateY: 0
  },
  observers: {
    scrollY(newY) {
      const {maxTranslateY} = this.data
      this.setMusicListStyle(newY, maxTranslateY)
    }
  },
  pageLifetimes: {
    show() {
      const scrollStyle = setScrollStyle()
      this.setData({
        statusBarHeight: getStatusBarHeight(),
        maxTranslateY: imgHeight - HEIGHT,
        scrollStyle,
      })
    }
  },
  methods: {
    onBack() {
      wx.navigateBack({
        delta: 1
      })
    },
    // 统一设置MusicList样式
    setMusicListStyle(scrollY, maxTranslateY) {
      const bgSrc = this.properties.album.pic
      const bgImageStyle = setBgImageStyle(scrollY, maxTranslateY, bgSrc)
      const filterStyle = setFilterStyle(maxTranslateY, scrollY)
      const display = setPlayBtnStyle(scrollY, maxTranslateY)
      this.setData({
        bgImageStyle, filterStyle, display
      })
    }    
  }
})
